<template>
  <div class="student-body box_bg">
    <h2 class="box_tit">
      <i class="icon icon1"></i>新增职业发展服务计划
      <i class="reti"></i>
    </h2>
    <el-form  v-model="ruleForm" :rules="rules" ref="ruleForm"  label-width="100px">
      <el-row>
        <el-col :span="4">
          <el-form-item label="院校" prop="schoolId">
            <el-select @change="schoolChange(ruleForm.schoolId)" v-model="ruleForm.schoolId" placeholder="请选择">
              <el-option v-for="school in schoolData" :label="school.text" :value="school.id" :key="school.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="二级院校" prop="secondSchoolId">
            <el-select @change="secondSchoolChange(ruleForm.secondSchoolId)" placeholder="请选择" v-model="ruleForm.secondSchoolId">
              <el-option v-for="secondSchool in secondSchoolData" :label="secondSchool.text" :value="secondSchool.id" :key="secondSchool.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="专业" prop="professionId">
            <el-select @change="professionChange(ruleForm.professionId)" placeholder="请选择" v-model="ruleForm.professionId">
              <el-option v-for="profession in professionData" :label="profession.text" :value="profession.id" :key="profession.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="年级" prop="grade">
            <el-select @change="gradeChange" placeholder="请选择" v-model="ruleForm.grade">
              <el-option v-for="grade in gradeData" :label="grade.gradeShow" :value="grade.grade" :key="grade.grade"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-table :data="ruleForm.careerDevelopmentDetail" style="width: 100%">
          <el-table-column :formatter="weekFormatter" prop="teachWeek" label="周次" width="180" align="center"></el-table-column>
          <el-table-column prop="startDate" label="开始时间" width="180" align="center"></el-table-column>
          <el-table-column prop="endDate" label="结束时间" align="center"></el-table-column>
          <el-table-column prop="period" label="课时" align="center">
            <template slot-scope="scope">
              <el-input-number v-model="ruleForm.careerDevelopmentDetail[scope.$index].period" :min="0" :max="20" label="请输入课时"></el-input-number>
            </template>
          </el-table-column>
          <el-table-column prop="supportPoint" label="支持点" align="center">
            <template slot-scope="scope">
              <el-input type="textarea" :rows="2" v-model="ruleForm.careerDevelopmentDetail[scope.$index].supportPoint" placeholder="请输入支持点"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="supportContent" label="支持内容" align="center">
            <template slot-scope="scope">
              <el-input type="textarea" :rows="2" v-model="ruleForm.careerDevelopmentDetail[scope.$index].supportContent" placeholder="请输入支持内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="supportContent" label="备注" align="center">
            <template slot-scope="scope">
              <el-input type="textarea" :rows="2" v-model="ruleForm.careerDevelopmentDetail[scope.$index].remark" placeholder="请输入备注内容"></el-input>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <el-col :span="4">
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button @click="returnMainPage('ruleForm')">返回</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        schoolData:[],
        secondSchoolData:[],
        professionData:[],
        gradeData:[],
        weekData:[],
        ruleForm:{
          "grade": null,
          "professionId": null,
          "professionName": null,
          "schoolId": null,
          "schoolName": null,
          "secondSchoolId": null,
          "secondSchoolName": null,
          "semester": null,
          "status": null,
          "statusShow": null,
          "careerDevelopmentDetail":[]
        },
        rules:{}
      }
    },
    created(){
      let self = this;
      let id = self.$route.params.id;
      self.axios.all([self.axios({//获得院校
        method:"get",
        url:api.getSchoolList
      }),self.axios({//根据id获得参数
        method:"get",
        url:api.getCareerDevelopmentPlanById+id
      })]).then(self.axios.spread(function(schoolData,ruleFormData){
        self.ruleForm = ruleFormData.data.data;
        self.schoolData = schoolData.data.data;
        self.axios.all([self.axios({//获得二级院校
          method:"get",
          url:api.getSecondSchoolList,
          params:{
            schoolId:self.ruleForm.schoolId
          }
        }),self.axios({//获得专业
          method:"get",
          url:api.getProfeesionList,
          params:{
            secondSchoolId:self.ruleForm.secondSchoolId
          }
        }),self.axios({//获得年级
          method:"get",
          url:api.schoolClass.queryGradeList,
          params:{
            professionId:self.ruleForm.professionId
          }
        })]).then(self.axios.spread(function(secondSchoolData,professionData,gradeData){
            self.secondSchoolData = secondSchoolData.data.data;
            self.professionData = professionData.data.data;
            self.gradeData = gradeData.data.data;
        }));
      }));


    },
    methods:{
      weekFormatter:function(row, column, cellValue){
        return "第"+cellValue+"周"
      },
      schoolChange:function(id){
        let self = this;
        for(let ind in self.schoolData){
          if(self.schoolData[ind].id === id){
            self.ruleForm.schoolName = self.schoolData[ind].text;
          }
        }
        self.axios({//获得二级院校
          method:"get",
          url:api.getSecondSchoolList,
          params:{
            schoolId:id
          }
        }).then(function(response){
          self.ruleForm.secondSchoolId = null;
          self.secondSchoolData = [];

          self.ruleForm.professionId = null;
          self.professionData = [];

          self.secondSchoolData = response.data.data;
        });
      },
      secondSchoolChange:function(id){
        let self  = this;
        for(let ind in self.secondSchoolData){
          if(self.secondSchoolData[ind].id === id){
            self.ruleForm.secondSchoolName = self.secondSchoolData[ind].text;
          }
        }
        self.axios({//获得专业
          method:"get",
          url:api.getProfeesionList,
          params:{
            secondSchoolId:id
          }
        }).then(function(response){
          self.ruleForm.professionId = null;
          self.professionData = [];
          self.professionData = response.data.data
        });
      },
      professionChange:function(id){
        let self = this;
        for(let ind in self.professionData){
          if(self.professionData[ind].id === id){
            self.ruleForm.professionName = self.professionData[ind].text;
          }
        }
        self.axios({
          method:"get",
          url:api.schoolClass.queryGradeList,
          params:{
            professionId:id
          }
        }).then(function(response){
          self.ruleForm.grade = null;
          self.gradeData = [];
          self.gradeData = response.data.data;
          console.log(self.gradeData);
        });
        self.axios({
          method:"get",
          url:api.getTeachWeekByProfessionId+self.ruleForm.professionId
        }).then(function(response){
          self.ruleForm.careerDevelopmentDetail = [];
          let data = response.data.data;
          for(let ind in data){
            data[ind].teachWeek = data[ind].week;
          }
          self.ruleForm.careerDevelopmentDetail = response.data.data;
        });
      },
      gradeChange:function(){
        let self = this;

      },
      returnMainPage:function(){
        this.$router.push({
          path:'/career/plan/index'
        })
      },
      submitForm:function(){
        let self = this;
        self.axios({
          method:"PUT",
          url:api.updateCareerDevelopment+self.ruleForm.id,
          data: self.ruleForm
        }).then(function(response){
          let flag = response.data.success;
          if(flag){
            self.$router.push({
              path:'/career/plan/index'
            })
          }else{

          }
        });
      }
    }
  }
</script>
<style>
  .demo-ruleForm{
    width:1000px;
  }
  .student-body {
    min-height: 545px;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 15px;
  }
  .student-body .contents span {
    display: inline-block;
    width: 100px;
    margin-top: 10px;
    text-align: right;
  }
  .student-body .contents .spanInput {
    height: 26px;
    width: 206px;
    line-height: 26px;
    font-size: 12px;
    color: #cdcdcd;
    text-indent: 5px;
    border-radius: 15px;
    border: 1px solid #cdcdcd;
    box-sizing: border-box;
    outline: none;
  }

  .student-body .contents .sexSpan {
    width: 20px;
    padding-left: 20px;
  }
  .student-body .contents .sexSpans{
    width: 50px;
  }
  .student-body .contents .lableInput {
    position: absolute;
    top: 12px;
    left: 105px;
  }
  .student-body .contents
  .student-body .reti {
    width: 94px;
  }
  .student-body .inputs {
    width: 100%;
    height: 40px;
    padding-top: 20px;
  }
  .student-body .inputs > span {
    font-size: 12px;
    color: #333;
    padding-left: 1px;
  }

  .box_tit {
    border-bottom: 1px solid #e6e8ec;
    position: relative;
    padding: 4px 0 10px 30px;
    margin-top: 0;
    font-weight: bold;
    line-height: 16px;
  }
  .el-table .cell {
    height: auto;
  }
  .el-form-item__content{
    margin: auto;
  }
</style>

